<template>
    <div class="common-layout">
        <el-container class="page-box">
            <MyMenu />
            <el-container class="content-box">
                <MyHead />
                <MyBao />
                <el-main>
                    <el-scrollbar>
                        <router-view class="elmainbox"></router-view>
                    </el-scrollbar>

                </el-main>
                <MyFoot />
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { onMounted, computed, toRefs, nextTick } from 'vue'
import { Http } from '../../api/api'
import { useStore } from '../../store'
import MyFoot from './MyFoot.vue'
import MyMenu from './MyMenu.vue'
import MyHead from './MyHead.vue'
import MyBao from './MyBao.vue'
import { routerList } from '../../utils/routerList'
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useStore()
const { changeCount, setUserInfo, getRoleListAsync, getMyRouterList, fromRouteName } = store;
const { count, userInfo } = toRefs(store)
const getUserInfo = async () => {
    let res = await Http.getuserinfo() as unknown as any;
    getMyRouterList([])
    if (res.code == 200) {
        setUserInfo(res.result)
        let mylist = getRouterListByRole(routerList, res.result.role)
        console.log(mylist)

        getMyRouterList([...mylist])

        router.addRoute({
            name: 'main',
            path: '/main',
            component: () => import("./Main.vue"),
            children: mylist
        })
        router.addRoute({
            path: "/:pathMatch(.*)*",
            redirect: "/404"
        })
        if (fromRouteName == 'login') {
            router.push('/home')
        }
    }
}

const getRouterListByRole = (arr: any, role: Number) => {
    console.log(role)
    let newList: any = arr.filter((item: any) => {
        if (item.max) {
            return role >= item.role && role <= item.max;
        } else {
            return role >= item.role
        }
    })
    newList.forEach((item: any) => {
        if (item.children) {
            return (item.children = getRouterListByRole(item.children, role))
        }
    })
    return newList
}

onMounted(() => {
    getRoleListAsync()
    nextTick()
    getUserInfo()

})

</script>

<style lang="scss" scoped>
.page-box {
    width: 100%;
    height: 100%;
}

.content-box {
    height: 100%;
    display: flex;
    flex-direction: column;

}
</style>